import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';


function JiuyeRightBottom() {

    const ref = useRef();

    useEffect(() => {
        var chartDom = ref.current;
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                feature: {
                    // dataView: { readOnly: false },
                    // restore: {},
                    // saveAsImage: {}
                }
            },
            legend: {
                data: ['30K+', '20K ~ 30K', '15K ~ 20K', '10K ~15K', '10k及以下'],
                textStyle: {
                    color: '#fff',
                },
            },
            series: [
                {
                    name: 'Funnel',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: [
                        { value: 60, name: '15K ~ 20K' },
                        { value: 40, name: '20K ~ 30K' },
                        { value: 20, name: '30K' },
                        { value: 80, name: '10K ~15K' },
                        { value: 100, name: '10k及以下' }
                    ]
                }
            ]
        };

        option && myChart.setOption(option);

    }, [])

    return (
        <div className='biYeMony_0_1' ref={ref}>

        </div>
    )
}

export default JiuyeRightBottom
